import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import './index.scss'
import PrAgendaItem from './agendaItem'
import { PrTableDayProps, PrTableDayState } from './type'
import Taro from '@tarojs/taro'
import { timelistLib } from './Lib'
import dayjs from 'dayjs'

export default class PrTableDay extends Component<PrTableDayProps, PrTableDayState>{
  constructor(props) {
    super(props)
    this.state = {

    }
  }

  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }
  //=============================
  getStyleTop(data, baseHeight) {
    if (!data) return ""
    let startTimeArr = data.startTime.split(":")
    let height1 = baseHeight * startTimeArr[0]
    let height2 = (startTimeArr[1] / 60) * baseHeight
    let top = Taro.pxTransform(height1 + height2)
    return top
  }
  getStyleHeight(data, baseHeight) {
    if (!data) return { height: "", ellipsis: false }
    let startTimeArr = data.startTime.split(":")
    let endTimeArr = data.endTime.split(":")
    let hourDiff = endTimeArr[0] - startTimeArr[0]
    let minuteDiff = endTimeArr[1] - startTimeArr[1]
    if (minuteDiff < 0) {
      hourDiff = hourDiff - 1
      minuteDiff = minuteDiff * -1
    }
    let height1 = hourDiff * baseHeight
    let height2 = (minuteDiff / 60) * baseHeight
    let height = height1 + height2
    let ellipsis = false//如果高度太小，就给最小高度并提示省略
    if (height < 16) {
      height = 16
      ellipsis = true
    }
    let Pxheight = Taro.pxTransform(height)
    return { height: Pxheight, ellipsis }
  }
  handleSelect = ({ start, end }) => {
    const title = window.prompt('New Event name')
    console.log(start, end)
    debugger
    if (title)
      this.setState({
        events: [
          ...this.state.events,
          {
            start,
            end,
            title,
          },
        ],
      })
  }

  render() {
    let datalist = this.props.datalist || []
    let scheduleList = datalist.map(item => {
      if (item.beAllDay == '1') return;
      return {
        ...item,
        start: new Date(item.scheduleDate + ' ' + item.startTime),
        end: new Date(item.scheduleDate + ' ' + item.endTime),
        title: item.scheduleTitle
      }
    })

    let today = dayjs().format()
    return (
      <View className='PrTableDay'>
        {/* 左侧时间 */}
        <View className='PrTableDay_left'>
          {
            timelistLib.map((item, index) => {
              return (
                <View className='time_scale' key={"time_scale" + index}>{item}</View>
              )
            })
          }
          
        </View>

        {/* 表格生成 */}
        <View className='PrTableDay_Right'>
        {
            timelistLib.map((item, index) => {
              if(index == timelistLib.length - 1){
                return ""
              }
              console.log(index, 'index');

              return (
                <View className='table_tr' key={"table_tr" + index}>
                 {/* <View className='table_td'> */}
                  {
                    datalist.map((itm, idx) => {
                      let data = itm
                      let baseHeight = 90
                      let getHeight = this.getStyleHeight(data, baseHeight)
                      let top = this.getStyleTop(data, baseHeight)
                      if (itm.beAllDay == '1') return;
                      if (itm.startTime.slice(0, 2) == index) {
                        // let mt = 37 * index
                        console.log(itm, 'itmitm', itm.startTime.slice(0, 2));
                        return (
                          // <View className='agendaItem' style={{ top: top }} onClick={()=>this.props.onClickItem(itm)}>
                          <View className='agendaItem' style={{ top: top }} >
                            <View className={`agendaItem_container ${getHeight.ellipsis ? "ellipsis" : ""}`} style={{ height: getHeight.height }}>
                              {
                                getHeight.ellipsis ? "···" : itm.scheduleTitle
                              }
                              {
                                getHeight.ellipsis ? '' :
                                  <View className='agendaItem_address'>{itm.scheduleLocation}</View>
                              }
                            </View>
                          </View>
                        )
                      }
                    })
                  }
                  </View>
                // </View>
              )
            })
          }

        </View>

        {/* 日程显示 */}
        {/* <View className='PrTableDay_main'> */}
        {/* {
            datalist.map((item,index)=>{//item：单天日程信息
              if(item.beAllDay == '1')return;
              // console.log(item,index,'item,index');
              return(
                <View className='main_ver' style={{height:'32px'}} key={"main_ver_"+index} onClick={()=>this.props.onClickItem(item)}>
                        <PrAgendaItem data={item} key={"AgendaItem_"+index} datalist={datalist}></PrAgendaItem>
                </View>
              )
            })
          } */}
        {/* </View> */}

      </View>
    )
  }
}